import { computed, defineComponent, reactive } from "vue";
import './yearOfOpening.scss'
export default defineComponent({
    props: {
        tableData: Array
    },
    setup(props, { emit }) {
        const circularList = reactive([
            {label: '好店', prop: 'Good', color: '#309ffa', show: true },
            {label: '平衡', prop: 'Fair', color: '#11aadc', show: true },
            {label: '差店', prop: 'Poor', color: '#09c6e3', show: true },
            {label: '事故店', prop: 'Trainwreck', color: '#4ba0cc', show: true },
        ]);
        const queryCircularList = computed(() => {
            return circularList.filter(item => item.show)
        })
        const queryListWidth = computed(() => {
            return (item, key) => {
                let total = queryCircularList.value.reduce((p, n) => {
                    return p += item[n.prop]
                }, 0)
                return item[key] * (100 / total) + '%'
            }
        })
        return () => (
            <div className="yearOfOpening">
                <div className="yearOfOpening-header">
                    <p className="yearOfOpening-header-title">开业年份</p>
                    <div className="yearOfOpening-header-circular">
                        {circularList.map(item => (
                            <div onClick={() => {
                                item.show = !item.show
                            }} >
                                <p style={{ '--circular-background': item.show ? item.color : 'transparent', border: `2px solid ${item.color}` }}></p>
                                <p>{item.label}</p>
                            </div>
                        ))}
                    </div>
                    <p>个数</p>
                    <p>新店财务成功率</p>
                    <p>内部投资报酬率</p>
                </div>
                <el-scrollbar>
                    {props.tableData.map(item => (
                        <div className="yearOfOpening-body-list">
                            <p>{item.year}</p>
                            <p>
                                {queryCircularList.value.map(it => (
                                    <p style={{ width: queryListWidth.value(item, it.prop), background: it.color }}>{item[it.prop]}</p>
                                ))}
                            </p>
                            <p>{item.Unit}</p>
                            <p>{item.HR}</p>
                            <p>{item.IRR}</p>
                        </div>
                    ))}
                </el-scrollbar>
            </div>
        )
    }
})